<template>
    <div class="" id="DefectReview">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="primary">缺陷处理</el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
                <datepickersummary @filterChange="filterObject"></datepickersummary>
            </el-col>
        </el-row>
        <template v-if="!filters.radio">
            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.total_bug" :label_data="showData(label_data.total_bug)"></LabelGrid>
                </el-col>

                <!-- <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.new_bug" :label_data="showData(label_data.new_bug)"></LabelGrid>
                </el-col> -->

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.resolved_bug" :label_data="showData(label_data.resolved_bug)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.closed_bug" :label_data="showData(label_data.closed_bug)"></LabelGrid>
                </el-col>
                
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.legacy_bug" :label_data="showData(label_data.legacy_bug)"></LabelGrid>
                </el-col>                                
            </el-row>
            <el-row :gutter="30">
            
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.reopen_bug" :label_data="showData(label_data.reopen_bug)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.degrade_bug" :label_data="showData(label_data.degrade_bug)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.deadline_bug" :label_data="showData(label_data.deadline_bug)"></LabelGrid>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.serious_bug" :label_data="showData(label_data.serious_bug)"></LabelGrid>
                </el-col>
            </el-row>

            <el-row :gutter="30">
                
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.bug_resolve_effective" :label_data="getFix(label_data.bugfix_cost)"></LabelGrid>
                </el-col>
                
                <el-col :xs="24" :sm="24" :lg="6">
                    <LabelGrid :label_info="label_info.invalid_bug_rate" :label_data="Number(label_data.invalid_bug_rate*100).toFixed(2) + '%'"></LabelGrid>
                </el-col>
            </el-row>

            <chartdefect></chartdefect>

            <dailysummary></dailysummary>
        </template>

        <template v-else>
            <div v-loading="summaryLoad"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading" class="summary">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.total_bug"
                            :label_data="showData(deptData.total_bug)"
                        ></LabelGrid>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.new_bug"
                            :label_data="showData(deptData.new_bug)"
                        ></LabelGrid>
                    </el-col> -->

                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.resolved_bug"
                            :label_data="showData(deptData.resolved_bug)"
                        ></LabelGrid>
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.closed_bug"
                            :label_data="showData(deptData.closed_bug)"
                        ></LabelGrid>
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.legacy_bug"
                            :label_data="showData(deptData.legacy_bug)"
                        ></LabelGrid>
                    </el-col>                                     
                </el-row>

                <el-row :gutter="30">
                        
                        <el-col :xs="24" :sm="24" :lg="6">
                            <LabelGrid
                                :label_info="dept_info.reopen_bug"
                                :label_data="showData(deptData.reopen_bug)"
                                :label_import="'small'"
                                :label_avg="standardKPI.bug_reopen_avg_project"
                                :label_now="deptData.reopen_bug"
                                :label_good="kpi.bug_reopen_avg_project"
                                :label_precent="'num'"
                                :nessary="true"
                            ></LabelGrid>
                        </el-col>

                        <el-col :xs="24" :sm="24" :lg="6">
                            <LabelGrid
                                :label_info="dept_info.degrade_bug"
                                :label_data="showData(deptData.degrade_bug)"
                                :label_import="'small'"
                                :label_avg="standardKPI.bug_degrade_avg_project"
                                :label_now="deptData.degrade_bug"
                                :label_good="kpi.bug_degrade_avg_project"
                                :label_precent="'num'"
                                :nessary="true"
                            ></LabelGrid>
                        </el-col>

                        <el-col :xs="24" :sm="24" :lg="6">
                            <LabelGrid
                                :label_info="dept_info.deadline_bug"
                                :label_data="showData(deptData.deadline_bug)"
                                :label_import="'small'"
                                :label_avg="standardKPI.bug_overtime_avg_project"
                                :label_now="deptData.deadline_bug"
                                :label_good="kpi.bug_overtime_avg_project"
                                :label_precent="'num'"
                                :nessary="true"
                            ></LabelGrid>
                        </el-col>

                        <el-col :xs="24" :sm="24" :lg="6">
                            <LabelGrid
                                :label_info="dept_info.serious_bug"
                                :label_data="showData(deptData.serious_bug)"
                            ></LabelGrid>
                        </el-col>
                    </el-row>

                <el-row :gutter="30">
                    
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.bug_resolve_effective"
                            :label_data="getFix(deptData.bugfix_cost)"
                            :label_import="'small'"
							:label_avg="standardKPI.bugfix_cost_avg_project"
							:label_now="deptData.bugfix_cost"
							:label_good="kpi.bugfix_cost_avg_project"
							:label_precent="'time'"
							:nessary="true"
                        ></LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid
                            :label_info="dept_info.invalid_bug_rate"
                            :label_data="Number(deptData.invalid_bug_rate*100).toFixed(2) + '%'"
                        ></LabelGrid>
                    </el-col>
                </el-row>
            </div>

            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">
                                缺陷解决效率(平均)
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="pad" style="height: 535px">
                            <ve-bar :data="dchartData" :loading="isLoad" :settings="chartSettings"></ve-bar>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">
                                缺陷解决时长(平均)
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="pad" style="height: 535px">
                            <ve-bar :data="timechartData" :loading="isLoad2" :colors="colors" :settings="chartSettings"></ve-bar>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-row :gutter="30" style="margin-top: 20px">
                <el-col :xs="24" :sm="24" :lg="12">
                    <el-card class="box-card m-b" shadow="never">
                        <div slot="header" class="clearfix" style="vertical-align:middle">
                        <div style="float: left; padding: 10px 0">reopen(累计)</div>
                        <!-- <el-radio-group v-model="importedSelected" style="float: right; padding: 3px 0" size="mini">
                            <el-radio-button label="事业群"></el-radio-button>
                            <el-radio-button label="事业部"></el-radio-button>
                        </el-radio-group> -->
                        </div>
                        <div> <!--  v-if="importedSelected === '事业部'" -->
                            <el-table
                                :data="pieChartData2"
                                style="width: 100%"
                                :height="'490'"
                                max-height="490">
                                <el-table-column width="100" align="center" label="排名">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <span v-else> {{scope.$index + 1}} </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="project_name"
                                align="center"
                                label="项目">
                                </el-table-column>
                                <el-table-column
                                label="Reopen"
                                align="center"
                                width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.reopen_bug_count > 0" style="color: red">{{ scope.row.reopen_bug_count }}</span>
                                    <span v-else>{{ scope.row.reopen_bug_count }}</span>
                                </template>
                                </el-table-column>
                            </el-table>
                            <!-- <el-pagination
                                :page-size="10"
                                :pager-count="5"
                                @current-change="handleCurrentImportDeptChange"
                                :current-page="currentImportDeptPage"
                                layout="prev, pager, next"
                                style="text-align: center"
                                :total="totalDeptData">
                            </el-pagination> -->
                        </div>
                        <!-- <div v-else>
                        <el-table
                            :data="pieChartData2"
                            style="width: 100%"
                            :height="'490'"
                            max-height="490">
                            <el-table-column width="100" align="center" label="排名">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <span v-else> {{scope.$index + 1}} </span>
                            </template>
                            </el-table-column>
                            <el-table-column
                                prop="project_name"
                                align="center"
                                label="事业群">
                                </el-table-column>
                                <el-table-column
                                prop="reopen_bug_count"
                                label="Reopen"
                                align="center"
                                width="80">
                                </el-table-column>
                        </el-table>
                        <el-pagination
                            :page-size="10"
                            :pager-count="5"
                            @current-change="handleCurrentImportGroupChange"
                            :current-page="currentImportGroupPage"
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="totalGroupData">
                        </el-pagination>
                        </div> -->
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="12">
                    <el-card class="box-card m-b" shadow="never">
                        <div slot="header" class="clearfix" style="vertical-align:middle">
                        <div style="float: left; padding: 10px 0">degrade(累计)</div>
                        <!-- <el-radio-group v-model="importedSelected2" style="float: right; padding: 3px 0" size="mini">
                            <el-radio-button label="事业群"></el-radio-button>
                            <el-radio-button label="事业部"></el-radio-button>
                        </el-radio-group> -->
                        </div>
                        <div> <!--  v-if="importedSelected2 === '事业部'" -->
                            <el-table
                                :data="pieChartData3"
                                style="width: 100%"
                                :height="'490'"
                                max-height="490">
                                <el-table-column width="100" align="center" label="排名">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <span v-else> {{scope.$index + 1}} </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="project_name"
                                align="center"
                                label="项目">
                                </el-table-column>
                                <el-table-column
                                label="Degrade"
                                align="center"
                                width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.degrade_bug_count > 0" style="color: red">{{ scope.row.degrade_bug_count }}</span>
                                    <span v-else>{{ scope.row.degrade_bug_count }}</span>
                                </template>
                                </el-table-column>
                            </el-table>
                            <!-- <el-pagination
                                :page-size="10"
                                :pager-count="5"
                                @current-change="handleCurrentImportDeptChange"
                                :current-page="currentImportDeptPage"
                                layout="prev, pager, next"
                                style="text-align: center"
                                :total="totalDeptData">
                            </el-pagination> -->
                        </div>
                        <!-- <div v-else>
                        <el-table
                            :data="pieChartData3"
                            style="width: 100%"
                            :height="'490'"
                            max-height="490">
                            <el-table-column width="100" align="center" label="排名">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <span v-else> {{scope.$index + 1}} </span>
                            </template>
                            </el-table-column>
                            <el-table-column
                                prop="project_name"
                                align="center"
                                label="事业群">
                                </el-table-column>
                                <el-table-column
                                prop="degrade_bug_count"
                                label="Degrade"
                                align="center"
                                width="80">
                                </el-table-column>
                        </el-table>
                        <el-pagination
                            :page-size="10"
                            :pager-count="5"
                            @current-change="handleCurrentImportGroupChange"
                            :current-page="currentImportGroupPage"
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="totalGroupData">
                        </el-pagination>
                        </div> -->
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="12" style="margin-top: 20px">
                    <el-card class="box-card m-b" shadow="never">
                        <div slot="header" class="clearfix" style="vertical-align:middle">
                        <div style="float: left; padding: 10px 0">超时未解决(累计)</div>
                        <!-- <el-radio-group v-model="importedSelected3" style="float: right; padding: 3px 0" size="mini">
                            <el-radio-button label="事业群"></el-radio-button>
                            <el-radio-button label="事业部"></el-radio-button>
                        </el-radio-group> -->
                        </div>
                        <div> <!--  v-if="importedSelected3 === '事业部'" -->
                            <el-table
                                :data="pieChartData4"
                                style="width: 100%"
                                :height="'490'"
                                max-height="490">
                                <el-table-column width="100" align="center" label="排名">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <span v-else> {{scope.$index + 1}} </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="project_name"
                                align="center"
                                label="项目">
                                </el-table-column>
                                <el-table-column
                                label="超期未解决"
                                align="center"
                                width="120">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.overtime_bug_count > 0" style="color: red">{{ scope.row.overtime_bug_count }}</span>
                                    <span v-else>{{ scope.row.overtime_bug_count }}</span>
                                </template>
                                </el-table-column>
                            </el-table>
                            <!-- <el-pagination
                                :page-size="10"
                                :pager-count="5"
                                @current-change="handleCurrentImportDeptChange"
                                :current-page="currentImportDeptPage"
                                layout="prev, pager, next"
                                style="text-align: center"
                                :total="totalDeptData">
                            </el-pagination> -->
                        </div>
                        <!-- <div v-else>
                        <el-table
                            :data="pieChartData4"
                            style="width: 100%"
                            :height="'490'"
                            max-height="490">
                            <el-table-column width="100" align="center" label="排名">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <span v-else> {{scope.$index + 1}} </span>
                            </template>
                            </el-table-column>
                            <el-table-column
                                prop="project_name"
                                align="center"
                                label="事业群">
                                </el-table-column>
                                <el-table-column
                                prop="overtime_bug_count"
                                label="超期未解决"
                                align="center"
                                width="120">
                                </el-table-column>
                        </el-table>
                        <el-pagination
                            :page-size="10"
                            :pager-count="5"
                            @current-change="handleCurrentImportGroupChange"
                            :current-page="currentImportGroupPage"
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="totalGroupData">
                        </el-pagination>
                        </div> -->
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="12" style="margin-top: 20px">
                    <el-card class="box-card m-b" shadow="never">
                        <div slot="header" class="clearfix" style="vertical-align:middle">
                        <div style="float: left; padding: 10px 0">缺陷逃逸率</div>
                        <!-- <el-radio-group v-model="importedSelected4" style="float: right; padding: 3px 0" size="mini">
                            <el-radio-button label="事业群"></el-radio-button>
                            <el-radio-button label="事业部"></el-radio-button>
                        </el-radio-group> -->
                        </div>
                        <div> <!--  v-if="importedSelected4 === '事业部'" -->
                            <el-table
                                :data="pieChartData5"
                                style="width: 100%"
                                :height="'490'"
                                max-height="490">
                                <el-table-column width="100" align="center" label="排名">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                    TOP{{ scope.$index + 1 }}
                                    </el-tag>
                                    <span v-else> {{scope.$index + 1}} </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="project_name"
                                align="center"
                                label="项目">
                                </el-table-column>
                                <el-table-column
                                prop="invalid_version_rate"
                                label="缺陷逃逸率"
                                align="center"                          
                                width="120">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.invalid_version_rate > 0" style="color: red">{{ formatter(scope.row.invalid_version_rate) }}</span>
                                    <span v-else>{{ formatter(scope.row.invalid_version_rate) }}</span>
                                </template>
                                </el-table-column>
                            </el-table>
                            <!-- <el-pagination
                                :page-size="10"
                                :pager-count="5"
                                @current-change="handleCurrentImportDeptChange"
                                :current-page="currentImportDeptPage"
                                layout="prev, pager, next"
                                style="text-align: center"
                                :total="totalDeptData">
                            </el-pagination> -->
                        </div>
                        <!-- <div v-else>
                        <el-table
                            :data="pieChartData5"
                            style="width: 100%"
                            :height="'490'"
                            max-height="490">
                            <el-table-column width="100" align="center" label="排名">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.$index=== 0" type="danger" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 1" type="warning" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <el-tag v-else-if="scope.$index=== 2" type="primary" size="medium" >
                                TOP{{ scope.$index + 1 }}
                                </el-tag>
                                <span v-else> {{scope.$index + 1}} </span>
                            </template>
                            </el-table-column>
                            <el-table-column
                                prop="project_name"
                                align="center"
                                label="事业群">
                                </el-table-column>
                                <el-table-column
                                prop="low"
                                label="Bug逃逸率"
                                align="center"
                                width="120">
                                </el-table-column>
                        </el-table>
                        <el-pagination
                            :page-size="10"
                            :pager-count="5"
                            @current-change="handleCurrentImportGroupChange"
                            :current-page="currentImportGroupPage"
                            layout="prev, pager, next"
                            style="text-align: center"
                            :total="totalGroupData">
                        </el-pagination>
                        </div> -->
                    </el-card>
                </el-col>
            </el-row>

            <!-- 趋势图 -->
            <el-row class="bgColor marT">
                <el-col :xs="24" :sm="24" :lg="24">                    
                    <el-tabs type="border-card" v-model="activeName">
                        <el-tab-pane name="0" label="缺陷流程处理覆盖率">
                            <ve-line
                            :data="lineChartData"
                            :settings="lineChartSettings"
                            :legend-visible="true"
                            :colors="lineColor"                            
                            ref="vline0"
                            :data-zoom="lineDataZoom"
                            :data-empty="dataEmpty"></ve-line>
                        </el-tab-pane>
                        <el-tab-pane name="1" label="流程符合度">
                            <ve-line
                                :data="lineChartData2"
                                :settings="lineChartSettings"
                                :legend-visible="true"
                                :colors="lineColor"                                
                                ref="vline1"
                                :data-zoom="lineDataZoom"
                                :data-empty="dataEmpty"></ve-line>
                        </el-tab-pane>
                        <el-tab-pane name="2" label="无效Bug比例">
                                <ve-line
                                    :data="lineChartData3"
                                    :settings="lineChartSettings"
                                    :legend-visible="true"
                                    :colors="lineColor"                                   
                                    ref="vline2"
                                    :data-zoom="lineDataZoom"
                                    :data-empty="dataEmpty"></ve-line>
                        </el-tab-pane>
                        <el-tab-pane name="3" label="缺陷逃逸率">
                                <ve-line
                                    :data="lineChartData4"
                                    :settings="lineChartSettings"
                                    :legend-visible="true"
                                    :colors="lineColor"                                    
                                    ref="vline3"
                                    :data-zoom="lineDataZoom"
                                    :data-empty="dataEmpty"></ve-line>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <!-- 流程符合度 -->
            <!--<el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="12" class="pad marT">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">
                                流程符合度占比
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-pie :data="pieChartData" :data-empty="pieEmpty"></ve-pie>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="12" class="pad marT">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">
                                流程符合度
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                    </el-row>
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line
                                :data="lineChartData"
                                :settings="lineChartSettings"
                                :legend-visible="true"
                                :colors="lineColor"
                                :data-zoom="lineDataZoom"
                                :data-empty="dataEmpty1"></ve-line>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row> -->

            <!-- 项目列表 -->
            <el-row class="bgColor marT">
                <el-col :xs="24" :sm="24" :lg="24">
                    <div class="ibox-title pad">项目列表</div>

                    <div class="table mar">
                        <el-table
                        :data="tableData.slice((tablecurrent-1)*tablesize,tablecurrent*tablesize)"
                        :header-cell-style="{background:'#eef1f6'}"
                        style="width: 100%">
                            <el-table-column
                                align="center"
                                type="index"
                                label="编号"
                                width="60">
                                <template slot-scope="scope">
                                    <span>{{ scope.$index + 1 + tablesize*(tablecurrent - 1) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="total_bug"
                                label="bug总数"
                               >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="resolved_bug"
                                label="已解决bug"
                                width="150">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="bugfix_effective"
                                label="解决效率"
                                width="130">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.bugfix_effective > 0" style="color: green">{{ scope.row.bugfix_effective }}</span>
                                    <span v-else>{{ scope.row.bugfix_effective }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="bugfix_cost"
                                label="解决时长"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="reopen"
                                width="150">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.reopen_bug > 0" style="color: red">{{ scope.row.reopen_bug }}</span>
                                    <span v-else>{{ scope.row.reopen_bug }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="degrade_bug"
                                label="degrade"
                                width="150">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.degrade_bug > 0" style="color: red">{{ scope.row.degrade_bug }}</span>
                                    <span v-else>{{ scope.row.degrade_bug }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="overtime_bug"
                                label="超期未解决"
                                width="130">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.overtime_bug > 0" style="color: red">{{ scope.row.overtime_bug }}</span>
                                    <span v-else>{{ scope.row.overtime_bug }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="遗留bug"
                                width="130">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.legacy_bug > 0" style="color: red">{{ scope.row.legacy_bug }}</span>
                                    <span v-else>{{ scope.row.legacy_bug }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="已关闭"
                                width="130">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.closed_bug > 0" style="color: red">{{ scope.row.closed_bug }}</span>
                                    <span v-else>{{ scope.row.closed_bug }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="serious_bug"
                                label="严重的bug"
                                width="130">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.serious_bug > 0" style="color: red">{{ scope.row.serious_bug }}</span>
                                    <span v-else>{{ scope.row.serious_bug }}</span>
                                </template>
                            </el-table-column>

                            <!-- <el-table-column align="center" width="200" label="项目符合度">
                                <el-table-column
                                    align="center"
                                    prop="fitNum"
                                    label="90%"
                                    width="200">
                                </el-table-column>
                            </el-table-column>

                            <el-table-column align="center" width="300" label="计划偏差率">
                                <el-table-column
                                    align="center"
                                    label="[-20%, 20%]"
                                    width="300">
                                    <el-table-column align="center" prop="Tg4" width="150" label="TG4.1">
                                    </el-table-column>
                                    <el-table-column align="center" prop="Tg5" width="150" label="TG5">
                                    </el-table-column>
                                </el-table-column>

                            </el-table-column>

                            <el-table-column align="center" label="评审一次通过率">
                                <el-table-column
                                    align="center"
                                    prop="active"
                                    label="80%"
                                    width="150">
                                </el-table-column>
                            </el-table-column>

                            <el-table-column align="center" label="评审发现问题关闭率">
                                <el-table-column
                                    align="center"
                                    prop="closer"
                                    label="75%"
                                    >
                                </el-table-column>
                            </el-table-column>              -->
                        </el-table>

                        <el-pagination class="marT"
                            :page-size="tablesize"
                            background
                            @size-change="tableSizeChange"
                            @current-change="tableCurrentImportDeptChange"
                            :current-page="tablecurrent"
                            layout="total, prev, pager, next, jumper"
                            style="text-align: center"
                            :total="tabletotal">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </template>
    </div>
</template>
<script>
import DatePickerSummary from '@/views/summary/DatePickerSummary'
import LabelGrid from '@/components/qa/Label.vue'
import ElDatePicker from '@/components/qa/DefectComponent/ElDatePicker.vue'
import ChartDefect from '@/components/qa/DefectComponent/ChartDefect.vue'
import DailySummary from '@/components/qa/DefectComponent/DailySummary.vue'
import { getHeader } from '@/app.config'
import { mapState } from 'vuex'
import { getKpi2 } from '@/api/kpi'
import 'v-charts/lib/style.css'
import 'echarts/lib/component/dataZoom'

export default {
    name: 'DefectReview',
    components: {
        LabelGrid,
        eldatepicker: ElDatePicker,
        chartdefect: ChartDefect,
        dailysummary: DailySummary,
        datepickersummary: DatePickerSummary
    },
    computed: {
        ...mapState({
            filters: state => state.filters,
            allDepartmentList: state => state.allDepartmentList,
            standardKPI: state => state.standardKPI
        })
    },
    data() {
        this.chartSettings = {
            labelMap: {
                bugfix_effective: '解决效率(个/天)',
                bugfix_cost: '解决时长(天/个)'
            }
        }
        return {
            kpi: {},
            summaryLoad: true,
            isLoad: false,
            isLoad2: false,
            colors: ['#ed5565'],
            tabletotal: 0,
            tablesize: 10,
            tablecurrent: 1,
            activeName: 0,
            dataEmpty: true,            
            pieEmpty: true,
            project_id: '',
            importedSelected: '事业群',
            importedSelected2: '事业群',
            importedSelected3: '事业群',
            importedSelected4: '事业群',
            tableData: [],
            dchartData: {
                columns: ['project_name', 'bugfix_effective'],
                rows: []
            },
            timechartData: {
                columns: ['project_name', 'bugfix_cost'],
                rows: []
            },
            lineChartData: {
                columns: ["month", "bug_flow_cover_rate"],
                rows: []
            },
            lineChartData2: {
                columns: ["month", "bug_flow_conformity"],
                rows: []
            },
            lineChartData3: {
                columns: ["month", "invalid_bug_rate"],
                rows: []
            },
            lineChartData4: {
                columns: ["month", "bug_escape_rate"],
                rows: []
            },
            lineChartSettings: {
                yAxisType: ['percent'],
                labelMap: {
                   bug_flow_cover_rate: '流程处理覆盖率',
                   bug_flow_conformity: '流程符合度',
                   invalid_bug_rate: '无效BUG比例',
                   bug_escape_rate: '缺陷逃逸率'
                }
            },
            pieChartData: {
                columns: ['项目', '符合度'],
                rows: []
            },
            pieChartData2: [],
            pieChartData3: [],
            pieChartData4: [],
            pieChartData5: [],
            lineColor: ["#7cb5ec"],
            lineDataZoom:[{
                type: 'slider',
                start: 0,
                end: 100
            }],
            datepicker_info: {
                droplist1: {
                    title: '版本:',
                    data: []
                },
                droplist2: {
                    title: '模块:',
                    data: []
                },
            },
            deptData: {},
            dept_info: {
                new_bug: {
                    label_hname: '新增缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                total_bug: {
                    label_hname: '所有缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                resolved_bug: {
                    label_hname: '已解决缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                closed_bug: {
                    label_hname: '已关闭缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                reopen_bug: {
                    label_hname: 'Reopen缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                degrade_bug: {
                	label_header: 'Avg',
                    label_hname: 'Degrade缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                legacy_bug: {
                    label_hname: '遗留缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                deadline_bug: {
                	label_header: 'Avg',
                    label_hname: '超期未解决缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                serious_bug: {
                    label_hname: '严重缺陷(S+A)',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                bug_resolve_effective: {
                	label_header: 'Avg',
                    label_hname: '缺陷解决时长',
                    label_sname: '总计',
                    label_unit: '(天/个)',
                    label_class: 'success',
                },
                invalid_bug_rate: {
                    label_header: 'Avg',
                    label_hname: '无效Bug比率',
                    label_sname: '总计',
                    label_unit: '',
                    label_class: 'success',
                }
            },
            label_info: {
                new_bug: {
                    label_hname: '新增缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                total_bug: {
                    label_hname: '所有缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                resolved_bug: {
                    label_hname: '已解决缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                closed_bug: {
                    label_hname: '已关闭缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                reopen_bug: {
                    label_hname: 'Reopen缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                degrade_bug: {
                    label_hname: 'Degrade缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'success',
                },
                legacy_bug: {
                    label_hname: '遗留缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                deadline_bug: {
                    label_hname: '超期未解决缺陷',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                serious_bug: {
                    label_hname: '严重缺陷(S+A)',
                    label_sname: '总计',
                    label_unit: '(个)',
                    label_class: 'danger',
                },
                bug_resolve_effective: {
                    label_hname: '缺陷解决时长',
                    label_sname: '总计',
                    label_unit: '(天/个)',
                    label_class: 'success',
                },
                invalid_bug_rate: {
                    label_header: 'Avg',
                    label_hname: '无效Bug比率',
                    label_sname: '总计',
                    label_unit: '',
                    label_class: 'success',
                }
            },
            label_data: {}
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
                console.log(this.filters)
            },
            deep: true,
        },
        activeName(v) {
            this.$nextTick(() => {
				this.$refs[`vline${v}`].echarts.resize()
			})
        }
    },
    methods: {
        getLabelKpi(type) {
            getKpi2(type).then(res => {
                if (res.status == 200) {
                    if (res.data.code === 200) {
                        this.kpi = res.data.avg_kpi
                    }
				}
            })
        },
        getPostParams(array) {
            let newArray = []
            if(array.length) {
                array.forEach((val) => {
                    newArray.push(val[1])
                })
            }
            return newArray
        },
        formatter_rate(row, column, cellValue, index) {
            var str = Number(cellValue*100).toFixed(2);
            str += "%";
            //console.log(str)
            return str;
        },
        formatter(num) {
            let number
            num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
            return number
        },
        getTimeRank() {
            this.isLoad2 = true
            let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
               //console.log(data)
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }

           this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-projrank-by-bugfix-cost?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
               if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res)
                       this.isLoad2 = false
                       this.timechartData.rows = res.data.rank_list.reverse()
                       //console.log(this.dchartData)
                   }
               }
           })
        },
        getEscape() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
                //console.log(data)
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-bug-escape-rank?time=${this.filters.time}`, data, {headers: getHeader()})
            .then(res => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       this.pieChartData5 = res.data.bug_escape_rank
                   }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getTrend() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
                //console.log(data)
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-bug-indicator-trend?time=${this.filters.time}`, data, {headers: getHeader()})
            .then(res => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       if(res.data.data && res.data.data.length) {
                           this.dataEmpty = false
                       }
                       this.lineChartData.rows = res.data.data
                       this.lineChartData2.rows = res.data.data
                       this.lineChartData3.rows = res.data.data
                       this.lineChartData4.rows = res.data.data
                   }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        solve() {
           this.isLoad = true
           let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
               //console.log(data)
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }

           this.$axios.post(`/api/qa/dept-projrank-by-bugfix-efficiency?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
               if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res)
                       this.isLoad = false
                       this.dchartData.rows = res.data.rank_list.reverse()
                       //console.log(this.dchartData)
                   }
               }
           })
        },
        reopen() {
           let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }
           this.$axios.post(`/api/qa/dept-projrank-by-bug-reopen?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
               if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res)
                       this.pieChartData2 = res.data.rank_list
                   }
               }
           })
        },
        degrade() {
           let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }
            this.$axios.post(`/api/qa/dept-projrank-by-bug-degrade?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        //console.log(res)
                        this.pieChartData3 = res.data.rank_list
                    }
                }
            })
        },
        overTime() {
           let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }
            this.$axios.post(`/api/qa/dept-projrank-by-bug-overtime?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        //console.log(res)
                        this.pieChartData4 = res.data.rank_list
                    }
                }
            })
        },
        tableKpi() {
           let data = {}
           if(this.filters.departList.length) {
               data = {departmentIds: this.filters.departmentId}
           } else {
               data = {departmentIds: this.allDepartmentList.allDepartmentList}
           }
            this.$axios.post(`/api/qa/dept-proj-bug-kpi?time=${this.filters.time}&page=${this.tablecurrent}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        //console.log(res)
                        this.tableData = res.data.project_kpi_list
                        this.tabletotal = res.data.project_kpi_list.length
                    }
                }
            })
        },
        getSummary() {
            let data = {}
            if(this.filters.departList.length) {
                data = {departmentIds: this.filters.departmentId}
            } else {
                data = {departmentIds: this.allDepartmentList.allDepartmentList}
            }
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/deptbugsummary?time=${this.filters.time}`, data, {headers: getHeader()}).then(res => {
                if(res.status == 200) {
                    if(res.data.code == 200) {
                        this.summaryLoad = false
                        this.deptData = res.data.sum
                    }
                }
            })
        },
        tableCellClassName({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 2) {
                if (row.overtime_bug_count > 0) {
                    console.log(row.overtime_bug_count)
                    return 'summary-font-danger'
                }
                if (row.low > 0) {
                    return 'summary-font-danger'
                }
                if (row.degrade_bug_count > 0) {
                    return 'summary-font-danger'
                }
                if (row.reopen_bug_count > 0) {
                    return 'summary-font-danger'
                }
            }
        },
        isRed({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 2) {
                if (row.overtime_bug_count > 0) {
                    console.log(row.overtime_bug_count)
                    return {
                        color: 'red'
                    }
                }
                if (row.low > 0) {
                    return {
                        color: 'red'
                    }
                }
                if (row.degrade_bug_count > 0) {
                    return {
                        color: 'red'
                    }
                }
                if (row.reopen_bug_count > 0) {
                    return {
                        color: 'red'
                    }
                }
            }
        },
        tableCellClassName1({row, column, rowIndex, columnIndex}) {
            if (columnIndex > 5) {
                if (row.reopen_bug > 0) {
                    return 'summary-font-danger'
                } else if (row.degrade_bug > 0) {
                    return 'summary-font-danger'
                } else if (row.overtime_bug > 0) {
                    return 'summary-font-danger'
                } else if (row.legacy_bug > 0) {
                    return 'summary-font-danger'
                }
            }
        },
        tableSizeChange(val) {
            //console.log(val)
            this.tablesize = val
        },
        tableCurrentImportDeptChange(page) {
            //console.log(page)
            this.tablecurrent = page
        },
        getData: function() {
            var project = this.filters.projectId;
            // var version = this.filters.select1;
            // var component = this.filters.select2;
            var time = this.filters.time;
            if (null == time || "undefined" == typeof(time)) {
                time = ''
            }

            if(!this.filters.radio) {
                this.getBugSummary(time, project)
                // this.getProjbugsab()
            } else {
                this.getSummary()
                this.solve()
                this.getEscape()                
                this.getLabelKpi('Bug')
                this.getTimeRank()
                this.reopen()
                this.degrade()
                this.getTrend()
                this.overTime()
                this.tableKpi()
            }
        },
        getBugSummary: function(time, project) {
            this.$axios.get('/api/qa/projbugsummary?projectId='+project+'&time='+time, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        this.label_data = response.data.sum;
                        console.log('this.label_data', this.label_data)
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        // getProjbugsab() {
        //     this.$axios.get(`/api/qa/projbugsab?projectId=${this.filters.projectId}&time=${this.filters.time}`)
        //         .then((res) => {
        //             console.log(res.data)
        //         })
        // },
        getAllVersion: function(project) {
            this.$axios.get('/api/qa/projgetbugversion/?projectId='+project, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        this.datepicker_info.droplist1.data = response.data.version;
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getComponent: function(project) {
            this.$axios.get('/api/qa/projgetbugcomponent/?projectId='+project, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        this.datepicker_info.droplist2.data = response.data.component;
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        select1Change: function(select1_change) {
            if ('all' == select1_change) {
                this.datepicker_info.droplist2.data = [];
            } else {
                this.getComponent(this.filters.projectId, select1_change);
            }
        },
        // handle eldatepickersingle event filter_object
        filterObject: function(filterChange) {
            // this.filters = filterChange;
            // this.label_info.patch_without_inline_c.daterange = this.filters.date;
            this.getData()
        },
        getFix: function(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0;
            } else {
                return data.toFixed(2)
            }
        },
        showData: function(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0;
            } else {
                return data
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';
    #DefectReview{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
    .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
    .table{
        padding-bottom: 10px;
    }
    #DefectReview >>> .el-card{
        border: 0;
    }
</style>
